<template>
	<view class="user-page">
		<view class="user-img">
			<image width="50" height="50" :src="curStud.imageUrl" round fit="cover" style="border: 1px solid #fff; borderRadius:50%;boxSizing: border-box; width: 50px; height: 50px;"  />
		</view>
		<view class="user-name-perm">
			<view class="name">{{curStud.nickName || curStud.username || curStud.name }}</view>
			<view class="permicon-time">
				<view class="time"> {{ vipExpireDate }}</view>
			</view>
		</view>
		<view class="switch-child" @click="selectOpenChildren">
			<view class="label">切换小孩</view>
			<image src="/static/icon/arrow-right-white.png" style="width: 20px;height: 20px;"></image>
		</view>
		<ActionSheet
		  title="请选择孩子"
		  v-if="show"
		  :show="show"
		  :actions="actions"
		  @close="onClose"
		  @select="onSelect"
		  @cancel="cancel"
		  cancel-text="取消"
		/>
	</view>
</template>

<script setup lang="ts">
	import {ref, computed} from 'vue'
	import {onShow} from "@dcloudio/uni-app"
	import { homeServer } from "@/common/index";
	import { urlHelp, timeFormatHelp } from "@/utils/index"
	import ActionSheet from "@/components/actionSheet/index.vue"
	import { useStudentListStore } from "@/stores/useStudentList.js"
	import dayjs from "@/plugins/dayjs.js"
	const studentStore = useStudentListStore();
	// const curStud = computed(() => studentStore.currentStudent);
	const curStud = ref(studentStore.currentStudent);
	const allStud  = ref(studentStore.students)
	
	function extractDate(dateTime: string): string {
	    return dayjs(dateTime).format('YYYY/MM/DD');
	}
	
	
	const vipExpireDate = computed(() => {
		const day = timeFormatHelp.daysDifference(studentStore.currentStudent?.expireDate);
		return day <= 0 ? "VIP已到期": `VIP 还剩 ${day} 天`
	})  
	
	// 获取学生信息
	const studentList = async () => {
		try{
			const {data, status} = await homeServer.studentList()
			if(status === "200"){
				const sts = data?.map(item => urlHelp.imgAddPrefix(item, 'imageUrl')) || [];
				studentStore.setStudents(sts || []);
				console.log("子组件查询", sts)
				const cstId = studentStore.currentStudent?.id
				if(cstId){
					const curStudent = sts.find(item => item.id === cstId)
					studentStore.onselectStudent(curStudent); 
				}
				allStud.value = sts;
				curStud.value = sts.find(s => s.id === studentStore.currentStudent?.id);
				if(data?.length === 0 || !Array.isArray(data)){
					studentStore.setStudents([]);
				}
			}
		}catch(e){
			console.log(e)
			//TODO handle the exception
		}
	}
	
	onShow(() => {
		studentList()
	})
	
	
	const show = ref(false);
	const actions = computed(() => {
		return allStud.value?.map(item => {
			return {
				...item,
				subname: `vip 到期时间 ${item.expireDate}`,
				color: '#07c160'
			}
		});
	})  
	
	const queryIsExpire = (expireTimeStamp: number): boolean =>{
		return Date.now() >= expireTimeStamp
	}
	
	const selectOpenChildren = () => {
		show.value = true;
	}
	const onClose = () => {
		show.value = false
	}
	const cancel= () => {
		show.value = false
	}
	const emits = defineEmits(['onSelectChange'])
	const onSelect = (detail) => {
		curStud.value = detail;
		studentStore.onselectStudent(detail);
		show.value = false
		const expireTimeStamp = detail?.['expireTimeStamp']
		if(expireTimeStamp){
			const bool = queryIsExpire(Number(expireTimeStamp));
			studentStore.setIsExpire(bool)
		}
		emits('onSelectChange');// 切换了孩子，其它接口也需要从新请求
	}
</script>

<style lang="scss" scoped>
	.user-page{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.user-img{
			display: flex;
			justify-content: center;
			width: 140upx;
			.van-image{
				border:5upx solid #FFFFFF
			}
			// height: 80upx;
		}
		.user-name-perm{
			width: calc(100% - 140upx - 160upx);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			.name{
				margin-bottom: 10upx;
				font-weight: 800;
				font-size: 32upx;
				color: #FFFFFF;
			}
			.permicon-time{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 10upx 15upx;
				// background: linear-gradient( 270deg, #3078E5 0%, #5293F6 100%), linear-gradient( 270deg, #2BC888 0%, #35DE99 100%);
				background: linear-gradient( 270deg, #2BC888 0%, #35DE99 100%);
				border-radius: 44upx;
				.time{
					margin-left: 10upx;
					// font-weight: 800;
					font-size: 25upx;
					color: #FFFFFF;
				}
			}
		}
		.switch-child{
			width: 160upx;
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			.label{
				margin-right: 5upx;
				font-weight: 800;
				color: #FFFFFF;
				font-size: 28upx;
			}
		}
		
	}
</style>

